<template>
	<view>
		<navbox title="相册排序"></navbox>
		<view style="margin-top: 190rpx;">
			<view v-for="(item,index) in list" :key="item.id"
				style="display: flex;align-items: center;justify-content: space-between;margin-left: 29rpx;margin-right: 28rpx;margin-top: 20rpx;">
				<view>{{item.typeName}}</view>
				<u-number-box v-model="item.orederby">
					<view slot="minus" class="minus">
						<u-icon name="minus" size="12"></u-icon>
					</view>
					<text slot="input" style="width: 50px;text-align: center;" class="input">{{ item.orederby}}</text>
					<view slot="plus" class="plus">
						<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
					</view>
				</u-number-box>
			</view>
		</view>
		<u-tabbar :value="value1" @change="change1" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item text="保存" icon="photo" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>

</template>

<script>
	import navbox from '../components/navbox/navbox.vue'
	export default {
		data() {
			return {
				list: [],
				value1: 0,
				total: '',
				parm: {
					pageSize: 20,
					pageNum: 1,
					userId: uni.getStorageSync("user").id
				}
			}
		},
		onPullDownRefresh() {
			this.parm.pageNum = 1
			this.loadPics()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			this.getBottom()
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			this.loadPics()
		},
		methods: {
			async getBottom() {
				const that = this
				if (this.list.length < this.total) {
					this.parm.pageNum++
					uni.showLoading({
						title: '加载中'
					});
					uni.request({
						url: that.$baseurl + "/wexinLogin/pictures/findSiPics",
						method: 'POST',
						data: that.parm,
						success(res) {
							that.list = [...that.list, ...res.data.data.data.records]
						}
					})
					setTimeout(function() {
						uni.hideLoading();
					}, 800);
				}
			},
			change1(name) {
				this.value1 = name
			},
			async click1() {
				const a = {
					pictureList: this.list
				}
				const res = await this.$myRuquest({
					url: '/wexinLogin/pic/orderList',
					method: 'post',
					data: a
				})
				uni.navigateBack()
			},
			async loadPics() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pictures/findSiPics',
					method: 'post',
					data: this.parm
				})
				this.total = res.data.data.data.total
				uni.hideLoading();
				this.list = res.data.data.data.records
			},
		},
		components: {
			"navbox": navbox,
		},
	}
</script>

<style lang="scss" scoped>
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
